<template>
  <div class="sn_center">
      <div class="log"><img src="@/assets/images/gzhlg.png" alt=""></div>
    <div class="search_input">
      <el-form :model="snData" :rules="rules" ref="snform">
        <el-form-item prop="phone">
          <el-input v-model="snData.phone" placeholder="请输入手机号码"></el-input>
          <div class="search_icon" @click="getqueryPhoneSn('snform')"><img src="@/assets/images/search.png" alt=""></div>
        </el-form-item>
      </el-form>
    </div>
    <div class="coding">2021@深圳市七彩宏云智能设备有限公司</div>
  </div>
</template>

<script>
import { queryPhoneSn } from "@/api/wxAccounts.js";
export default {
  data() {
    var phoneReg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
    var validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('号码不能为空!'))
      }
      if (!phoneReg.test(value)) {
        callback(new Error('手机号码有误'))
      } else {
        callback()
      }
    };
    return {
      snData: {
        phone: ''
      },
      rules: {
        phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
      },
    }
  },
  methods: {
    getqueryPhoneSn(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          queryPhoneSn({ phone: this.snData.phone }).then(res => {
            console.log('1111', res)
            this.$router.push({ path: '/wxAccounts/snDetails', query: { phone: this.snData.phone } })
          }).catch(err => {
            this.$message.error(err.msg)
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.sn_center {
  height: 100%;
  background-image: -webkit-linear-gradient(90deg, #0079ff 0%, #00bcff 100%);
  .coding{
      position: absolute;
      bottom: 10%;;
      width: 100%;
      text-align: center;
      font-size:12px;
      color: #fff;
  }
  .log{
      position: absolute;
      height: 80px;
      width: 200px;
      top: 15%;
      left: 50%;
      transform: translate(-50%,0);
      img{
          height: 100%;
          width: 100%;
      }
  }
  .search_input {
    position: relative;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
    width: 80%;
    .search_icon {
      position: absolute;
      right: 0;
      top: 0;
      width: 40px;
      height: 40px;
      img {
        margin: 10px 0 0 10px;
        width: 20px;
        height: 20px;
      }
    }
  }
}
</style>